require('./PageRiZhiTestEdit.less');

import Reflux from 'reflux';
import ReactMixin from 'react-mixin';
import Actions from './Actions'
import Store from './Store';
import { Control } from 'react-keeper'
import { Button,Page, Panel,PanelHeader, PanelBody, PanelFooter,ButtonArea, MediaBox,Cells, Cell,CellHeader,MediaBoxTitle,MediaBoxHeader,MediaBoxDescription,MediaBoxBody,MediaBoxInfo,MediaBoxInfoMeta,
  CellBody,CellFooter, Form,FormCell,Radio,Gallery,GalleryDelete,Uploader,TextArea} from  'react-weui/build/packages'
import AMap from './../../../components/amap'
import jlrz from './../../../assets/icon/发锁.png';

class RiZhiTestEdit extends React.Component {

  constructor(props) {
    super(props);
    this.setPosition = this.setPosition.bind(this);
    this.addFiles = this.addFiles.bind(this);
    this.showFiles = this.showFiles.bind(this);
    this.hideFiles = this.hideFiles.bind(this);
    this.selectMore = this.selectMore.bind(this);
    this.subMitInfo = this.subMitInfo.bind(this);
  }

  subMitInfo() {
    Control.replace('/dgzshome/ok');
  }

  selectMore() {
    Control.go('/dgzshome/list')
  }

  hideFiles() {
    Actions.hideFiles();
  }

  setPosition(obj) {
    console.log(obj);
    Actions.setPosition(obj);
  }

  addFiles(file) {
    console.log(file);
    Actions.addFiles(file);
  }

  showFiles(file, index) {
    Actions.showFiles(index);
  }

  render() {
    return (
      <div className="sgedit">
        <Panel>
          <PanelHeader>
            当前位置
          </PanelHeader>
          <PanelBody>
            <MediaBox type="small_appmsg">
              <Cell onClick={e=>{this.refs.amap.getCurrentPosition()}}>
                <CellHeader>
                  <img src={jlrz}
                       style={{
                         width: '20px',
                         marginRight: '5px',
                         display: 'block'
                       }}/>
                </CellHeader>
                <CellBody>
                  {this.state.sgedit.position.name}
                </CellBody>
              </Cell>
            </MediaBox>
          </PanelBody>
          <AMap ref="amap" onSetPosition={this.setPosition} position={this.state.sgedit.position}></AMap>
        </Panel>
        <Panel>
          <PanelHeader>
            现场照片
          </PanelHeader>
          <PanelBody>
            <MediaBox type="small_appmsg">

              <Uploader ref="up"
                        maxCount={8}
                        maxWidth={400}
                        title=""
                        files={this.state.sgedit.files}
                        className="up-div"
                        onError={msg => alert(msg)}
                        onChange={(file,e)=>this.addFiles(file)}
                        onFileClick={(e, file, i) => {this.showFiles(file,i)}}
              />

            </MediaBox>
          </PanelBody>
        </Panel>

        <Panel>
          <PanelHeader>
            问题描述
          </PanelHeader>
          <PanelBody>
            <MediaBox type="small_appmsg">
              <Cell>
                <CellHeader>
                  <img src={jlrz}
                       style={{
                         width: '20px',
                         marginRight: '5px',
                         display: 'block'
                       }}/>
                </CellHeader>
                <CellBody>
                  <TextArea placeholder="" showCounter={false} rows="2" maxlength="200"></TextArea>
                </CellBody>
              </Cell>
            </MediaBox>
          </PanelBody>
        </Panel>


        <Panel>
          <PanelBody>
            <PanelHeader>
              故障类型
            </PanelHeader>
            <MediaBox type="small_appmsg">
              <Form radio>
                <FormCell radio>
                  <CellHeader>
                    <img src={jlrz}
                         style={{
                           width: '20px',
                           marginRight: '5px',
                           display: 'block'
                         }}/>
                  </CellHeader>
                  <CellBody>
                    <div style={{fontSize:'16px'}}>故障</div>
                  </CellBody>
                  <CellFooter>
                    <Radio name="radio1" value="1" defaultChecked/>
                  </CellFooter>
                </FormCell>
                <FormCell radio>
                  <CellHeader>
                    <img src={jlrz}
                         style={{
                           width: '30px',
                           marginLeft:'-5px',
                           marginRight: '1px',
                           display: 'block'
                         }}/>
                  </CellHeader>
                  <CellBody>
                    <div style={{fontSize:'16px'}}>损坏</div>
                  </CellBody>
                  <CellFooter>
                    <Radio name="radio1" value="2"/>
                  </CellFooter>
                </FormCell>
              </Form>

            </MediaBox>
          </PanelBody>
          <PanelBody>
            <Cell>
              <CellBody>
                <ButtonArea>
                  <Button onClick={this.subMitInfo}>提交</Button>
                </ButtonArea>
              </CellBody>
            </Cell>
          </PanelBody>
        </Panel>

        <Panel>
          <PanelBody>
            <MediaBox type="appmsg">
              <MediaBoxHeader>
                <img src={jlrz}
                     style={{
                       marginRight: '5px',
                       display: 'block'
                     }}/>
              </MediaBoxHeader>
              <MediaBoxBody>
                <MediaBoxTitle>田馥甄</MediaBoxTitle>
                <MediaBoxDescription>发现了一大堆的问题,没有任何人来做修改发现了一大堆的问题,没有任何人来做修改发现了一大堆的问题,没有任何人来做修改发现了一大堆的问题,没有任何人来做修改发现了一大堆的问题,没有任何人来做修改发现了一大堆的问题,没有任何人来做修改</MediaBoxDescription>
                <MediaBoxInfo>
                  <MediaBoxInfoMeta>故障</MediaBoxInfoMeta>
                  <MediaBoxInfoMeta extra>已回复</MediaBoxInfoMeta>
                  <MediaBoxInfoMeta extra>2017-08-08 17:52:51</MediaBoxInfoMeta>
                </MediaBoxInfo>
              </MediaBoxBody>
            </MediaBox>
          </PanelBody>
          <PanelFooter>
            <Cell access link onClick={this.selectMore}>
              <CellBody>
                <div style={{textAlign:'center'}}>查看更多...</div>
              </CellBody>
            </Cell>
          </PanelFooter>
        </Panel>


      </div>
    );
  }

  componentWillMount() {

  }

  componentDidMount() {

    //wx.getLocation({
    //  type: 'gcj02',
    //  success: function (res) {
    //    console.log(res);
    //    var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
    //    var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
    //
    //  },
    //  cancel: function (res) {
    //    alert('用户拒绝授权获取地理位置!');
    //  }
    //});

  }

  componentWillReceiveProps(nextProps) {

  }

  shouldComponentUpdate(nextProps, nextState) {
    const thisProps = this.props || {},
      thisState = this.state.rztestedit || {};
    if (Object.keys(thisProps).length !== Object.keys(nextProps).length ||
      Object.keys(thisState).length !== Object.keys(nextState).length) {
      return true;
    }

    for (const key in nextProps) {
      if (thisProps[key] !== nextProps[key]) {
        console.log(thisProps[key], nextProps[key]);
        return true;
      }
    }

    for (const key in nextState) {
      if (thisState[key] !== nextState[key]) {
        console.log(thisState[key], nextState[key]);
        return true;
      }
    }
    return false;
  }


}

ReactMixin.onClass(RiZhiTestEdit, Reflux.connect(Store, 'rztestedit'));


export default RiZhiTestEdit ;
